<template>
  <div class="home">
    <div class="box">
      <h2 style="color: aquamarine">拾忆记事本</h2>
      <h6 style="color: aquamarine">记录生活点点滴滴，写下生活每一个美好</h6>
      <div class="input-box">
        <span>内容</span>
        <input
          style="width: 600px"
          type="text"
          placeholder="请输入你要记事的内容"
          @keyup.enter="add"
          v-model="value"
        />
        <button @click="add">确认</button>
      </div>
    </div>
   
    <div  class="list-content" v-if="list.length!=0">
      <ul class="con">
        <li v-for="(item, index) in list" :key="index">
          <span style="width:100px;">{{ index + 1 }}&emsp13;|&emsp13;</span>
          <span >{{ item }}</span>
          &emsp13;|&emsp13; <button class="btn" @click="del(index)">删除</button>
        </li>
      </ul>
     
    </div>  
    <p v-else>暂无数据</p>

    <p>{{ list.length }}个记事</p>
    <button @click="clear">清空</button>
  </div>
</template>

<script>
export default {
  name: "CeshiHomeView",

  data() {
    return {
      list: [],
      value: "",
    };
  },

  mounted() {},

  methods: {
    add() {
      // this.list.unshift(this.value);
       if(this.value.length==0){
          alert('不能为空')
       }else{
         this.list.unshift(this.value)
         this.value=""
       }
       
    },
    del(index){
      if(confirm('确定删除吗')){
         this.list.splice(index,1)
      }
     
    },
    clear(){
      this.list=[]
    }
  },
};
</script>

<style scoped>
.home {
  width: 100%;
}
.list-content{
  width: 100%;
 
  display: flex;
  justify-content: space-around;
  align-items: center;
}
li{
  height: 60px;
  list-style: none;
  border-bottom: 1px dashed black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.con{

 width: 100%;
 
}
.box{
  width: 100%;
  height: 130px;
  background: salmon;
}
.btn{
  right: inherit;
  border: none;
}
input{
  outline: none;
}
</style>
